<template>
  <div id="page">
    <div id="header">
      <div class="time">
        <span>{{ month }}月{{ date }}日</span>
        <span>
          <template v-if="day == 0">星期天</template>
          <template v-if="day == 1">星期一</template>
          <template v-if="day == 2">星期二</template>
          <template v-if="day == 3">星期三</template>
          <template v-if="day == 4">星期四</template>
          <template v-if="day == 5">星期五</template>
          <template v-if="day == 6">星期六</template>
        </span>
        <span>
          <template v-if="hour < 10">{{ "0" + hour }}</template
          ><template v-else>{{ hour }}</template
          >:<template v-if="minute < 10">{{ "0" + minute }}</template
          ><template v-else>{{ minute }}</template>
        </span>
      </div>
      <div style="text-align: right">
        <div>存款 : {{ self.wealth }}</div>
        <div>KPI : {{ self.kpi }}/{{ self.target_kpi }}</div>
      </div>
    </div>
    <div id="workSpace">
      <ul>
        <transition-group name="fadeIn">
          <li v-for="(event, index) of logList" :key="index">
            <div v-html="event.text"></div>
            <div v-if="event.actions" class="actionList">
              <div
                v-for="(actionItem, index) of event.actions"
                :key="actionItem.text"
                class="actionItem"
                @click="handleCb(actionItem)"
              >
                {{ index + 1 }}. {{ actionItem.text }}
              </div>
            </div>
          </li>
        </transition-group>
      </ul>
    </div>
    <div id="footer">
      <div>能力 : {{ self.ability }}</div>
      <div>健康 : {{ self.health }}</div>
      <div>快乐 : {{ self.happiness }}</div>
      <div>薪资 : {{ self.salary }}</div>
    </div>
  </div>
</template>

<script>
import eventList from "@/data/event";
export default {
  name: "App",
  data() {
    return {
      time: new Date(2024, 0, 1, 9).getTime(),
      staffList: [
        {
          ability: 50,
          health: 60,
          wealth: 300,
          salary: 100,
          happiness: 60,
          kpi: 0,
          target_kpi: 300,
          tags: {},
        },
      ],
      eventList,
      logList: [],
    };
  },
  computed: {
    self() {
      return this.staffList[0];
    },
    month() {
      return new Date(this.time).getMonth() + 1;
    },
    date() {
      return new Date(this.time).getDate();
    },
    day() {
      return new Date(this.time).getDay();
    },
    hour() {
      return new Date(this.time).getHours();
    },
    minute() {
      return new Date(this.time).getMinutes();
    },
    period() {
      if (this.day == "0" || this.day == "6") {
        return "weekend";
      } else if (this.hour < 9) {
        return "before_work";
      } else if (this.hour >= 9 && this.hour < 12) {
        return "working";
      } else if (this.hour == 12) {
        return "lunch";
      } else if (this.hour > 12 && this.hour < 18) {
        return "working";
      } else if (this.hour >= 18) {
        return "after_work";
      } else {
        return null;
      }
    },
  },
  watch: {
    "self.health"(val) {
      if (val < 0) {
        alert("你猝死了");
        window.location.reload();
      }
    },
    "self.wealth"(val) {
      console.log("val", val);
      if (val < 0) {
        alert("你穷死了");
        window.location.reload();
      }
    },
  },
  mounted() {
    this.generateEvent();
  },
  methods: {
    handleCb(target) {
      var cb_res = target.cb.call(this);
      var res = "";
      if (target.text) res += `<b>${target.text}</b>`;
      if (cb_res) res += `<b>${cb_res}</b>`;
      this.logList[this.logList.length - 1] = {
        text: `
        ${this.logList[this.logList.length - 1].text}
        ${res}
        `,
      };
      if (target.hour == undefined) {
        this.time += 1 * 1000 * 60 * 60;
      } else {
        this.time += target.hour * 1000 * 60 * 60;
      }

      setTimeout(() => {
        this.generateEvent();
      }, 1000);
    },
    generateEvent() {
      var valid_eventList = this.eventList.filter(
        (event) => event.weight && event.weight.call(this)
      );
      console.log("valid_eventList", valid_eventList);
      var all_event_weight = valid_eventList.reduce((pre, cur) => {
        return pre + cur.weight.call(this);
      }, 0);
      for (
        var i = 0, sum = 0, random = Math.random() * all_event_weight;
        i < valid_eventList.length;
        i++
      ) {
        sum += valid_eventList[i].weight.call(this);
        if (sum >= random) {
          break;
        }
      }
      var event = valid_eventList[i];

      if (event) {
        this.logList.push(event);
      } else {
        alert("出错，无可用事件");
      }

      if (event.effects) {
        var valid_effectList = event.effects.filter((effect) => {
          return effect.weight.call(this);
        });
        var all_effect_weight = valid_effectList.reduce((pre, cur) => {
          return pre + cur.weight.call(this);
        }, 0);
        for (
          var i2 = 0, sum2 = 0, random2 = Math.random() * all_effect_weight;
          i2 < valid_effectList.length;
          i2++
        ) {
          sum2 += valid_effectList[i2].weight.call(this);
          if (sum2 >= random2) {
            break;
          }
        }
        // console.log("i2", i2, valid_effectList[i2]);
        this.handleCb(valid_effectList[i2]);
      }

      this.$nextTick(() => {
        var div = document.getElementById("workSpace");
        div.scrollTop = div.scrollHeight;
      });
    },
  },
};
</script>

<style lang="scss">
#page {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
  #header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10px;
    border-bottom: 1px solid #fff;
    .time {
      font-size: 1.2rem;
      span {
        margin-right: 5px;
      }
    }
  }
  #footer {
    display: flex;
    text-align: center;
    justify-content: space-between;
    padding: 5px 10px;
    border-top: 1px solid #fff;
  }
  #workSpace {
    padding: 10px;
    flex-grow: 1;
    overflow: auto;
    .actionList {
      display: flex;
      flex-wrap: wrap;
      .actionItem {
        text-decoration: underline;
        margin: 5px 10px;
      }
    }

    // .fadeIn-enter-active,
    // .fadeIn-leave-active {
    //   transition: opacity 1s ease;
    // }

    // .fadeIn-enter-from,
    // .fadeIn-leave-to {
    //   opacity: 0;
    // }
  }
}
</style>
